<template>
	<view>
		<text v-if="transform !='translateY(0)'" class="secret-info">旧浪博客由lzzy.soft23制作</text>
		<view class="info-container" :style="bodyStyle" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
			<image src="/static/icons(1)/icon.png" class="icon-login"></image>
			<text class="info-welcome">WELCOME!</text>
			<text class="sub-welcome">欢迎加入旧浪博客</text>
			<view class="upload-pic-container" @click="clikChooseImage">
				<image :src="avatar" mode="aspectFill" class="img-avatar"></image>
				<text class="txt-avatar"> {{avatarName}}</text>
			</view>
			<input type="text" class="input-info" placeholder-class="input-holder" placeholder="请输入昵称" id="nick" @input="inputGet" />
			<input type="text" class="input-info" placeholder-class="input-holder" placeholder="请输入邮箱" id="email" @input="inputGet" />
			<input type="text" class="input-info" placeholder-class="input-holder" placeholder="请输入用户名" id="user" @input="inputGet" />
			<view class="pwd-container">
			  <input v-if="isPwd" type="password" :value="password" id='password' @input="inputGet" placeholder="请输入密码" placeholder-class="input-holder"/>
			  <input v-else type="text" :value="password" id='password' @input="inputGet" placeholder="请输入密码" placeholder-class="input-holder"/>
			  <text :class="isPwd?'iconfont icon-passwordhidden ic-pwd-status':'iconfont icon-passwordshown ic-pwd-status'" @click="switchPwd"></text>
			</view>
			</view>
			<view class="register-btn" @click="clickRegister">注册</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				transform: 'translateY(0)',
				transition: '',
				startY: 0,
				avatar: '/static/icons(1)/default_user.png',
				avatarName: '请点击并选择图片上传',
				nick: '',
				email: '',
				user: '',
				isPwd: true,
				password: ''
			}
		},
		computed:{
			bodyStyle: function(){
				return{
					'transform': this.transform,
					'transition': this.transition
				}
			}
		},
		methods: {
			touchStart(e){
				//console.log(e);
				this.startY = e.touches[0].clientY
			},
			touchMove(e){
				let distance = e.touches[0].clientY - this.startY
				if(distance < 0){
					return
				}
				if(distance > 200){
					distance = 200
				}
				this.transform = `translateY(${distance}rpx)`
				this.transition = ''
			},
			touchEnd(e){
				this.transform = 'translateY(0)'
				this.transition = 'transform 300ms linear'
			},
			clikChooseImage(){
				uni.chooseImage({
					count:1,
					success: res=> {
						let path = res.tempFilePaths[0]
						let url = this.$params.host +this.$params.action_upload
						uni.showLoading({
							title:'上传头像....',
							mask:false
						});
						this.$req.postFile(url,'file',path,{},res=>{
							console.log(res);
							let json =JSON.parse(res.data)
							this.avatarName = json.data
							this.avatar =this.$params.host + this.avatarName
						},()=>{
							uni.hideLoading()
						})
					}
				})
			},
			inputGet(e){
			  const target = e.currentTarget.id; // 获取输入框的 id（如 'user'）
			  this[`${target}`] = e.detail.value; // 用反引号包裹模板字符串，动态赋值
			},
			checkValid(){
				if(!this.$checkLen(this.user,6,"用户名")){
					return false
				}
				if(!this.$checkLen(this.nick,6,"昵称")){
					return false
				}
				if(!this.$checkLen(this.password,6,"密码")){
					return false
				}
				// 修正后的电子邮箱验证正则表达式
				let reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				if(reg.test(this.email)){
					uni.showToast({
						title: '电子邮箱格式不正确',
						icon:'none'
					});
					return false
				}
				if(this.avatarName =='电子并选择图片上传'|| this.avatarName.length==0){
					uni.showToast({
						title:'请选择图片上传',
						icon:'none'
					});
					return false
				}
				return true
			},
			clickRegister(){
				if(!this.checkValid()){
					return
				}
				uni.showLoading({
					title:'提交注册...',
					mask:false
				});
				let data = {
					"nick_name": this.nick,
					"user_name" : this.user,
					"avatar" : this.avatarName,
					"password" : this.password,
					"email": this.email
				}
				let url =this.$params.host + this.$params.action_register
				this.$req.post(url ,data,res=>{
					console.log(res);
					res =res.data
					uni.showToast({
						title: res.message,
						icon:'none'
					});
					if(!res.success){
						return
					}
					let app = getApp()
					app.globalData.id =res.data.id
					app.globalData.avatar =res.data.avatar
					app.globalData.userName =res.data.userName
					app.globalData.nickName =res.data.nickName
					app.globalData.token =res.data.token
					app.globalData.email =res.data.email
					app.globalData.type =res.data.type
					this.$noti.post(this.$params.noti_login_status)
					uni.navigateBack()
				},()=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style>
@import url("register.css");
</style>